<template>
  <van-nav-bar
    :title="title"
    left-arrow
    :fixed="true"
    :placeholder="!isScroll"
    :right-text="rightText"
    @click-left="onClickBack"
    @click-right="onClickRight"
    :style="isScroll ? { background: navBarBgColor } : {}"
  >
    <template #right v-if="search">
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
</template>
<script setup lang="ts">
const props = defineProps<{
  title?: string
  rightText?: string
  search?: boolean
  // 滚动到多少位置才显示背景色
  scrollThreshold?: number
  isScroll?: boolean // 是否监听滚动事件
  back?: () => void
}>()
const emit = defineEmits<{
  (e: 'right-click'): void
}>()
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const onClickBack = () => {
  // 自定义返回逻辑
  if (props.back) {
    return props.back()
  }
  if (history.state.back) {
    const prevPage = history.state.back
    // 截取/login?returnUrl=/business?id=1前的/login
    const pathOnly = prevPage.split('?')[0]
    if (pathOnly === '/login') {
      // 如果上一页面是/login，尝试获取上上一个页面的路径
      const prevPrevPage = history.state.back && history.state.back.prevPage
      console.log(prevPrevPage)
      if (prevPrevPage) {
        router.push(prevPrevPage)
      } else {
        // 如果无法获取上上一个页面路径，默认返回首页
        router.push('/')
      }
    } else {
      router.back()
    }
  } else {
    router.push('/')
  }
}
const onClickRight = () => {
  emit('right-click')
}
// 导航栏背景色，初始为透明
const navBarBgColor = ref('transparent')
// 定义页面滚动到改变背景色的临界位置
const scrollThreshold = props.scrollThreshold ? props.scrollThreshold : 46

// 监听页面滚动事件
const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  console.log(scrollTop)

  if (scrollTop >= scrollThreshold) {
    navBarBgColor.value = '#fff'
  } else {
    navBarBgColor.value = '#transparent'
  }
}
// 在组件挂载时添加页面滚动事件监听
onMounted(() => {
  if (props.isScroll) {
    window.addEventListener('scroll', handleScroll)
  }
})

// 在组件卸载前移除页面滚动事件监听
onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>
<style scoped lang="scss">
// 深度作用选择符   样式穿透
::v-deep() {
  .van-nav-bar {
    min-height: var(--nav-bar-height);
    background: var(--gray-background);
    transition: var(--transition-duration) all;
    &__arrow {
      font-size: 18px;
      color: #333;
    }
    &__test {
      font-size: 15px;
    }
  }
  .van-nav-bar__left,
  .van-nav-bar__right {
    padding: 10px;
  }
}
</style>
